<template>
  <div class="app-container ">
        <el-form :inline="true" size="mini" label-width="90px" :model="params">
          <el-form-item label="客户名称：">
            <el-select
                    v-model="params.customerId"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词"
                    :remote-method="remoteMethod1"
                    :loading="customerLoading">
              <el-option
                      v-for="item in customerList"
                      :key="item.customerId"
                      :label="item.customerName"
                      :value="item.customerId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品类：">
            <el-input v-model="params.goodsName"></el-input>
          </el-form-item>
          <el-form-item label="牌号：">
            <el-select v-model="params.kingGoodsId" filterable placeholder="请选择" clearable>
              <el-option
                      v-for="item in goodsList"
                      :key="item.kingId"
                      :label="item.goodsSn"
                      :value="item.kingId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期：">
            <el-date-picker
                    v-model="params.buyDate"
                    type="daterange"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
                    @click="getListData()"
                    type="primary">
              查询
            </el-button>
          </el-form-item>
        </el-form>
        <div class="fenxi-row">
          <div class="fenxi-col">
            <div class="num">{{info.perIntervalDays}}</div>
            <div class="name">平均购买率</div>
          </div>
          <div class="fenxi-col">
            <div class="num">{{info.minIntervalDays}}</div>
            <div class="name">最低购买率</div>
          </div>
          <div class="fenxi-col">
            <div class="num">{{info.maxIntervalDays}}</div>
            <div class="name">最高购买率</div>
          </div>
        </div>
        <div id="myChart" :style="{'height':'300px'}" v-loading="loadingChart"></div>
        <el-table
                v-loading="loading"
                :data="info.ordGoodsList"
                border
                style="width: 100%; margin-top: 20px">
          <el-table-column
                  prop="customerName"
                  label="客户"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="orderSn"
                  label="合同号"
                  align="center">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="createTime"
                  label="合同时间">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="goodsName"
                  label="品名">
          </el-table-column>
          <el-table-column
                  align="center"
                  prop="goodsSn"
                  label="牌号">
          </el-table-column>
          <el-table-column
                  prop="buyType"
                  label="类型"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="source"
                  label="来源"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="goodsNum"
                  label="数量"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="goodsPrice"
                  label="单价"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="intervalDays"
                  label="间隔天数"
                  align="center">
          </el-table-column>
          <el-table-column
                  prop="goodsStock"
                  label="仓位"
                  align="center">
          </el-table-column>
        </el-table>
  </div>
</template>

<script>
    import { analysisCustomerInfo,customerOrderSummary,buyRateInfo,getCustomerOption,orderGoodsList} from '@/api/partner'
    import {goodsList} from '@/api/company'
    import {formatDate} from '@/utils/date';
    import store from '@/store'
    import { mapGetters } from 'vuex'
    import {validateCommission} from '@/utils/validate';

    export default {
        name: "goodsAnalysis",
        data(){
          return {
            loadingChart:false,
            info:{},
            loading:false,
            list:[],
            params:{
              "customerId" : '',
              "goodsName" : "",
              "goodsSn" : "",
              "buyDate" : [],
              kingGoodsId:'',
            },
            customerList:[],
            customerLoading:false,
            goodsList:[]
          }
        },
        computed: {
          ...mapGetters([
            'name',
            'mobile',
            'userId'
          ]),
        },
        created() {
          this.params.customerId = this.$route.query.customerId;
          this.params.goodsName = this.$route.query.goodsName ? this.$route.query.goodsName : '';
          this.params.goodsSn = this.$route.query.goodsSn ? this.$route.query.goodsSn : '';
          this.params.buyDate = [this.$route.query.buyDate + '-01-01',this.$route.query.buyDate + '-12-31'];
          this.customerList = [{customerId:this.$route.query.customerId,customerName:this.$route.query.customerName}]
          this.getListData();
          orderGoodsList().then((res)=>{
            this.goodsList = res.list
          })
        },
        filters: {

        },
        methods: {
          //获取客户列表
          remoteMethod1(query) {
            if(query && query!= ''){
              this.customerLoading = true;
              getCustomerOption({keywords:query}).then(response => {
                this.customerList = response;
                this.customerLoading = false;
              }).catch(()=>{
                this.customerLoading = false;
              });
            }
          },
          getListData() {
            this.loading = true;
            buyRateInfo(this.params).then((res) => {
              this.info = res;
              this.loading = false;
              this.drawCaiGouCount(res.xList,res.yList,res.zList,res.dList);
            }).catch(()=>{
              this.loading = false;
            })
          },


          //画图表
          drawCaiGouCount(x,y1,y2,y3){
            let myChart = this.$echarts.init(document.getElementById('myChart'));
            let array = [];
            array = JSON.parse(JSON.stringify(y1));
            array = array.filter((el)=>{
              return el != null
            });
            array = array.sort((a, b) => a - b)
            let min = array[0] ? array[0] : 0;
            // 绘制图表
            myChart.setOption({
              dataZoom: [{
                show: true,
              }, {
                type: 'inside'
              }],
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              legend: {
                data: ['价格', '购买量','间隔天数']
              },
              xAxis: [
                {
                  type: 'category',
                  data: x,
                  axisPointer: {
                    type: 'shadow'
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '价格',
                  scale:true,
                  min:min - 500 > 0 ? min - 500 : 0,
                  axisLabel: {
                    formatter: '￥{value}'
                  },
                },
                {
                  type: 'value',
                  name: '购买量',
                  axisLabel: {
                    formatter: '{value} 吨'
                  }
                },
                {
                  type: 'value',
                  name: '间隔天数',
                  position : 'right',
                  offset : 80,
                  axisLabel: {
                    formatter: '{value} 天'
                  }
                },
              ],
              series: [
                {
                  name: '价格',
                  type: 'line',
                  smooth: true,
                  data: y1,
                  symbolSize: 10,   //设定实心点的大小
                  itemStyle: {
                    normal: {
                      //定义一个list，通过list获取颜色，
                      color: '#c71010'
                    }
                  },
                },
                {
                  name: '购买量',
                  type: 'bar',
                  data: y2,
                  yAxisIndex: 1,
                  barWidth : 30,//柱图宽度
                  itemStyle: {
                    normal: {
                      //定义一个list，通过list获取颜色，
                      color: '#1d9b00'
                    }
                  },
                },
                {
                  name: '间隔天数',
                  type: 'line',
                  smooth: true,
                  data: y3,
                  yAxisIndex: 2,
                  symbolSize: 10,   //设定实心点的大小
                  itemStyle: {
                    normal: {
                      //定义一个list，通过list获取颜色，
                      color: '#006bfc'
                    }
                  },
                },
              ]
            });
            this.loadingChart = false;
          },
        }
    }
</script>

<style scoped lang="scss">
    .customerAnalysisInfo-div{
      padding:10px;
      .top-name{
        font-size:24px;
        .top-lable{
          display: inline-block;
          margin-left:15px;
          font-size: 12px;
          vertical-align: middle;
          color: #409eff;
          background: #ecf5ff;
          border: 1px solid #b3d8ff;
          height: 24px;
          line-height: 24px;
          padding: 0 10px;
          border-radius: 5px;
        }
      }
      .guanlian{
        font-size:14px;
        line-height: 22px;
        margin-top:10px;
        span{
          display: inline-block;
          margin-right:20px
        }
      }
    }
    .fenxi-row{
      overflow: hidden;
      .fenxi-col{
        display: inline-block;
        width:140px;
        text-align: center;
        padding:20px 0 30px 0;
        .name{
          font-size:12px;
        }
        .num{
          font-size:18px;
          font-weight: bold;
          margin-bottom:5px;
        }
      }
    }
</style>
